<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <button class="layui-btn layui-col-md1" id="back" ><i class="layui-icon">&#xe65c;</i>返回</button>
    </div>


    <hr/>

    <form class="layui-form ">
        <input type="hidden" name="id" th:value="${news==null? null:news.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">新闻标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" placeholder="新闻标题名称"
                       class="layui-input" th:value="${news==null? null:news.title}">
            </div>
        </div>

        <!-- 富文本编辑器 -->
        <div class="layui-form-item">
            <label class="layui-form-label">内容编辑</label>
            <div class="layui-input-block">
                <div id="div1" class="toolbar"></div>
                <div id="div2" class="text">
                </div>
            </div>
        </div>
        <textarea id="text1" style="display: none" name="content" th:text="${news==null? null:news.content}"></textarea>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            </div>
        </div>
    </form>


    <script type="text/javascript">
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            $ = layui.jquery;
            layer = layui.layer;
            form.render(); //更新全部

            /**
             * 富文本编辑器
             */
            var E = window.wangEditor;
            var editor = new E('#div1', '#div2');  //两个参数也可以传入 elem 对象，class 选择器
            var $text1 = $('#text1');
            editor.customConfig.onchange = function (html) {// 监控变化，同步更新到 textarea
                $text1.val(html);
            }
            editor.customConfig.debug = true;
            editor.customConfig.uploadImgServer = 'upload/editorupload';
            editor.customConfig.uploadFileName = 'files'
            editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;//最大文件限制1M
            editor.customConfig.uploadImgMaxLength = 5;//最多一次上传5张图片
            editor.customConfig.customAlert = function (info) {
                layer.alert(info)
            }
            editor.create();
            reset();//初始化重置

            //重置
            $("#reset").click(function () {
                reset();
            })

            //重置方法
            function reset() {
                var content = $("#text1").text();
                editor.txt.html(content);
            }



            /*****************************
             * @Description: 表单提交
             * @Param:
             * @return:
             * @Author: 刘涛
             * @Date: 2018/3/14
             *******************************/
            form.on('submit(*)', function (data) {
                $.ajax({
                    url: "news/addOrEdit",
                    dataType: "json",
                    data: data.field,
                    type: "post",
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg(data.msg+',页面稍后跳转', {icon: 1, anim: 1});
                            setTimeout('$("#content-body").load("news/goNewsmgr")',3000);
                        } else {
                            layer.msg(data.msg, {icon: 2, anim: 6});
                        }
                    }
                })

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            /**
             * 返回按钮
             * */
            $("#back").click(function () {
                $("#content-body").load("news/goNewsmgr");
            })

        });
    </script>
</div>
</body>
</html>